<template>
  <div class="category-box">
    <head1></head1>
    <el-row class="category-head" justify="center" type="flex">
      <el-col :span="19">
        <div class="choicebg">
          <el-row type="flex" justify="center">
            <el-col :span="6"><el-button round @click="choiceshoes(2)">休闲鞋</el-button></el-col>
            <el-col :span="6"><el-button round @click="choiceshoes(1)">跑鞋</el-button></el-col>
            <el-col :span="6"><el-button round @click="choiceshoes(3)">篮球鞋</el-button></el-col>
          </el-row>
        </div>
        <el-row class="category-content">
          <el-col :span="24">
          <ul>
            <li v-for="item in goods" :key="item.shoes_id" class="card-box2 fl" @click="getid(item.shoes_id)">
            <el-card class="goods1">
              <img :src="item.shoes_img" class="img"/>
              <div class="card-div">
                <p>{{item.memo}}</p>
                <span>价格：{{item.price}}￥</span>
              </div>
              </el-card>
            </li>
          </ul>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-pagination
                @size-change="pageSizeChange"
                @current-change="currPageChange"
                :current-page="curr_page"
                :page-sizes="[10, 50, 100, 500, 1000]"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
        </el-row>
      </el-col>
    </el-row>
    <footer1></footer1>
  </div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      goods: [],
      action: {
        selectgoods: 'shoes_Web_exploded/Shoes/selectShoesByCategory'
      },
      curr_page: 1,
      page_size: 10,
      total: 0,
      category_id: sessionStorage.getItem('category_id')
    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    choiceshoes (id) {
      this.category_id = id
      this.getGoodsList(1, 10, this.category_id)
    },
    getid (id) {
      sessionStorage.setItem('shoes_id', id)
      this.$router.push('/goods')
    },
    getGoodsList (curr_page = 1, page_size = 8, category_id = this.category_id) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size,
        'category_id': category_id
      }
      http.xhrPost(this, this.action.selectgoods, params, (res) => {
        this.goods = res.data.list
        console.log(this.goods)
        this.page_size = res.data.pageSize
        this.curr_page = res.data.pageNum
        this.total = res.data.total
      })
    },
    pageSizeChange (pageSize) {
      // eslint-disable-next-line
      this.getGoodsList(1, pageSize, this.category_id)
    },
    currPageChange (currPage) {
      // eslint-disable-next-line
      this.getGoodsList(currPage, this.page_size, this.category_id)
    }
  },
  mounted () {
    this.getGoodsList()
  }
}
</script>

<style lang="scss">
@import '../assets/style/common.scss';
  .category-box {
    background: #f4f4f4;
    .category-head{
      margin: 30px 0px 30px 0px;
      text-align: center;
      .choicebg {
        margin-left: 50px;
        width: 1110px;
        background-color: white;
        height: 50px;
        line-height: 50px;
        span {
          border: 1px solid #f4f4f4;
          border-radius: 10px;
          font-size: 16px;
        }
      }
    }
    .category-content {
      margin-bottom: 50px;
      .card-box2 {
        width: 240px;
        height: 300px;
        padding-left: 50px;
        padding-top: 45px;
        .img {
          width: 100%;
          height: 100%;
          padding-bottom: 10px;
        }
        p {
          height: 40px;
          display: block;
          overflow: hidden;
          padding-bottom: 15px;
          color: #666;
          font-size: 12px;
        }
        span {
          color: $red;
        }
      }
    }
  }
</style>
